<!DOCTYPE html>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright © 2013-2016 The Nxt Core Developers.                            ~
  ~ Copyright © 2016-2017 Jelurida IP B.V.                                    ~
  ~                                                                           ~
  ~ See the LICENSE.txt file at the top-level directory of this distribution  ~
  ~ for licensing information.                                                ~
  ~                                                                           ~
  ~ Unless otherwise agreed in a custom licensing agreement with Jelurida B.V.,
  ~ no part of the Nxt software, including this file, may be copied, modified,~
  ~ propagated, or distributed except according to the terms contained in the ~
  ~ LICENSE.txt file.                                                         ~
  ~                                                                           ~
  ~ Removal or modification of this copyright notice is prohibited.           ~
  ~                                                                           ~
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			body {background-color: #E0E0E0; color: #000; font-family: Tahoma; font-size: 10pt; margin: 0; padding: 10px;}
			table {border-collapse: collapse; width: 100%;}
			td {background-color: #C0C0C0; height: 20px; line-height: 20px; padding: 0;}
			.amount {background-image: url(); width: 20px;}
			.block {background-image: url(); width: 20px;}
			.c {height: 10px;}
			.e {border-right: 1px solid #808080; height: 10px; width: 10px;}
			.gap {background-color: transparent; height: 10px;}
			.generator {background-image: url(); width: 20px;}
			.height {background-image: url(); width: 20px;}
			.n {border-top: 1px solid #808080; height: 10px;}
			.ne {border-top: 1px solid #808080; border-right: 1px solid #808080; height: 10px; width: 10px;}
			.nw {border-top: 1px solid #808080; border-left: 1px solid #808080; height: 10px; width: 10px;}
			.payloadLength {background-image: url(); width: 20px;}
			.s {border-bottom: 1px solid #808080; height: 10px;}
			.se {border-bottom: 1px solid #808080; border-right: 1px solid #808080; height: 10px; width: 10px;}
			.sw {border-bottom: 1px solid #808080; border-left: 1px solid #808080; height: 10px; width: 10px;}
			.target {background-image: url(); width: 20px;}
			.text {cursor: default; padding: 0 10px 0 5px; white-space: nowrap;}
			.timestamp {background-image: url(); width: 20px;}
			.numberOfTransactions {background-image: url(); width: 20px;}
			.version {background-image: url(); width: 20px;}
			.w {border-left: 1px solid #808080; height: 10px; width: 10px;}
		</style>
		<script type="text/javascript">
			function addBlock(block) {
				var blocks = document.getElementById("blocks"), row = blocks.insertRow(0), element;
				row.id = "block" + block.index + "_0";
				element = row.insertCell(0);
				element.className = "gap";
				element.colSpan = 8;
				row = blocks.insertRow(1);
				row.id = "block" + block.index + "_1";
				element = row.insertCell(0);
				element.className = "nw";
				element = row.insertCell(1);
				element.className = "n";
				element.colSpan = 6;
				element = row.insertCell(2);
				element.className = "ne";
				row = blocks.insertRow(2);
				row.id = "block" + block.index + "_2";
				element = row.insertCell(0);
				element.className = "w";
				element = row.insertCell(1);
				element.className = "height";
				element.title = "Height";
				element = row.insertCell(2);
				element.className = "text";
				element.innerHTML = block.height;
				element = row.insertCell(3);
				element.className = "generator";
				element.title = "Generator";
				element = row.insertCell(4);
				element.className = "text";
				element.innerHTML = block.generator;
				element = row.insertCell(5);
				element.className = "timestamp";
				element.title = "Timestamp";
				element = row.insertCell(6);
				element.className = "text";
				element.innerHTML = formatTimestamp(block.timestamp);
				element = row.insertCell(7);
				element.className = "e";
				row = blocks.insertRow(3);
				row.id = "block" + block.index + "_3";
				element = row.insertCell(0);
				element.className = "w";
				element = row.insertCell(1);
				element.className = "c";
				element.colSpan = 6;
				element = row.insertCell(2);
				element.className = "e";
				row = blocks.insertRow(4);
				row.id = "block" + block.index + "_4";
				element = row.insertCell(0);
				element.className = "w";
				element = row.insertCell(1);
				element.className = "numberOfTransactions";
				element.title = "Number of transactions";
				element = row.insertCell(2);
				element.className = "text";
				element.innerHTML = block.numberOfTransactions;
				element = row.insertCell(3);
				element.className = "amount";
				element.title = "Total amount and fee";
				element = row.insertCell(4);
				element.className = "text";
				element.innerHTML = formatAmount(block.totalAmountNQT) + " + " + formatAmount(block.totalFeeNQT);
				element = row.insertCell(5);
				element.className = "payloadLength";
				element.title = "Payload length";
				element = row.insertCell(6);
				element.className = "text";
				element.innerHTML = formatVolume(block.payloadLength);
				element = row.insertCell(7);
				element.className = "e";
				row = blocks.insertRow(5);
				row.id = "block" + block.index + "_5";
				element = row.insertCell(0);
				element.className = "w";
				element = row.insertCell(1);
				element.className = "c";
				element.colSpan = 6;
				element = row.insertCell(2);
				element.className = "e";
				row = blocks.insertRow(6);
				row.id = "block" + block.index + "_6";
				element = row.insertCell(0);
				element.className = "w";
				element = row.insertCell(1);
				element.className = "version";
				element.title = "Version";
				element = row.insertCell(2);
				element.className = "text";
				element.innerHTML = block.version;
				element = row.insertCell(3);
				element.className = "block";
				element.title = "Block";
				element = row.insertCell(4);
				element.className = "text";
				element.innerHTML = block.block;
				element = row.insertCell(5);
				element.className = "target";
				element.title = "Base target";
				element = row.insertCell(6);
				element.className = "text";
				element.innerHTML = (block.baseTarget >= 100000 ? Math.round(block.baseTarget / 1000) : (block.baseTarget >= 10000 ? Math.round(block.baseTarget / 100) / 10 : (block.baseTarget >= 1000 ? Math.round(block.baseTarget / 10) / 100 : block.baseTarget / 1000))) + " %";
				element = row.insertCell(7);
				element.className = "e";
				row = blocks.insertRow(7);
				row.id = "block" + block.index + "_7";
				element = row.insertCell(0);
				element.className = "sw";
				element = row.insertCell(1);
				element.className = "s";
				element.colSpan = 6;
				element = row.insertCell(2);
				element.className = "se";
				element = parent.document.getElementById("orphanedBlocksCounter");
				element.innerHTML = parseInt(element.innerHTML) + 1;

                document.getElementById("myTransactionsFrame").contentWindow.removeTransaction("block" + block.index);
				document.getElementById("myTransactionsFrame").contentWindow.decrementNumberOfConfirmations();

			}
			
			function addBlocks(blocks) {
				var i;
				for (i = 0; i < blocks.length; i++) {
					addBlock(blocks[i]);
				}
			}

			function formatAmount(amount) {
                var digits=[], formattedAmount = "", i;
                var wholePart = Math.floor(amount / 100000000);
                var fractionalPart = amount % 100000000;
                do {
                    digits[digits.length] = wholePart % 10;
                    wholePart = Math.floor(wholePart / 10);
                } while (wholePart > 0);
                for (i = 0; i < digits.length; i++) {
                    if (i > 0 && i % 3 == 0) {
                        formattedAmount = "'" + formattedAmount;
                    }
                    formattedAmount = digits[i] + formattedAmount;
                }
                if (fractionalPart != 0) {
                    formattedAmount += ".";
                    for (i = ("" + fractionalPart).length; i < 8; i++) {
                        formattedAmount += "0";
                    }
                    formattedAmount += fractionalPart;
                }
                return formattedAmount;
            }

			function formatTimestamp(timestamp) {
				return (new Date(Date.UTC(2013, 10, 24, 12, 0, 0, 0) + timestamp * 1000)).toLocaleString();
			}
			
			function formatVolume(volume) {
				var digits=[], formattedVolume = "", i;
				do {
					digits[digits.length] = volume % 10;
					volume = Math.floor(volume / 10);
				} while (volume > 0);
				for (i = 0; i < digits.length; i++) {
					if (i > 0 && i % 3 == 0) {
						formattedVolume = "'" + formattedVolume;
					}
					formattedVolume = digits[i] + formattedVolume;
				}
				return formattedVolume + " B";
			}
		</script>
	</head>
	<body>
		<table id="blocks"></table>
	</body>
</html>